import React, {Component} from 'react'
import { Input, List,Button, Divider, Radio, Modal, Layout,

} from 'antd';
import '../../component/pro_caseSearch/Pro_Case_search.css';
import ReactToPrint from 'react-to-print';
import axios from 'axios';
import PdfPreview from "../../article/components/PdfPreview";
import {
    SearchWapper,
    SearchName,
    SearchBox,
    ListInfo, ListInfoPDF, ListInfoPDFButton,
} from './DataSearStyle';
import {URL} from "../../constant/Constant";

const {Header} = Layout;







/**
 * 课题组7
 * @autuhor zm
 */
class ResearchGroup7 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            keyWord: '',//关键字
            pageData:1,
            pageDataPDF:1,
            pageSizeData:5,
            pdfData: [],
            visible: false,
            baseData: [],//基本信息表
            resultData: [],
            PDF_path: ''//pdf
        }
    }


    onChangeKeyWord = (e) => {
        this.setState({
            keyword: e.target.value,
        });
    };



    //查询按钮方法
    handleSearchInfo = () => {
        //获取企业名称
        const keyWord = this.state.keyWord;

        let formData = new FormData();
        formData.append('keyWords', keyWord);
        axios({
            method: 'post',
            url: URL.urlRoot + URL.Group7Search,
            data: formData,
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
            .then((res) => {
                console.log(res);
                this.setState({
                    pdfData: res.data.data.documents
                }, () => {
                    console.log("this.state.pdfData")
                    console.log(this.state.pdfData)
                    console.log("this.state.pdfData")
                })
            })
            .catch(err => {
                console.log('失败')
            })


    };

    // 初始化
    componentDidMount = () => {
        axios({
            method: 'post',
            url: URL.urlRoot + URL.allGroupData7,
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
            .then((res) => {
                console.log("测试res")
                console.log(res.data.data)
                console.log("测试res")
                const tempData = res.data.data.documents;
                this.setState({
                    pdfData: tempData,
                }, () => {

                })
            })
    }
    //查看按钮
    showModalPDF = (i) => {
        const item = this.state.pdfData[i];
        this.setState({
            visible:true,
            PDF_path: item.downloadPath,
        })
    }
    //控制modal的显示与隐藏
    handleOkPDF = () => {
        this.setState({
            visible: true,
        })
    }
    handleCancelPDF = () => {
        this.setState({
            visible: false,
        })
    }

    render() {
        // 企业区域
        // 表头
        const columnPDF = [
            {
                title1: '标题',
                title2: '作者',
                title3: '操作'
            }
        ];
        const {data} = this.state;

        return (
            <div
                className='pro_case_search'
                style={{padding: 24, background: '#fff', height: '100%'}}
            >
                <Header style={{background: '#fff', padding: 0}}>
                    <div style={{float: 'left'}}>
                        <a href='/'>
                            <img src={require("../../img/logo-whut.png")}/>
                        </a>
                    </div>
                </Header>
                <Divider orientation="left">查询条件</Divider>


                <SearchWapper>
                    <SearchName>
                        关键字:
                    </SearchName>
                    <SearchBox>
                        <Input
                            type='primary'
                            placeholder={"可以输入标题或者是关键字"}
                            className='SearchWapper searchbox'
                            value={this.state.keyword} onChange={this.onChangeKeyWord}/>
                    </SearchBox>
                </SearchWapper>



                <Divider orientation="right">
                    <Button
                        type="primary"
                        onClick={this.handleSearchInfo}
                    >查询
                    </Button>
                </Divider>
                <List
                    dataSource={columnPDF}
                    renderItem={item => (
                        <List.Item>
                            <ListInfoPDF>{item.title1}</ListInfoPDF>
                            <ListInfoPDF>{item.title2}</ListInfoPDF>
                            <ListInfoPDFButton>{item.title3}</ListInfoPDFButton>
                        </List.Item>
                    )}
                />
                <List
                    pagination={{
                        onChange: (page,pageSize) => {
                            console.log(page,pageSize);
                            this.setState({
                                pageDataPDF:page
                            })
                        },
                        pageSize: 5,
                    }}
                    dataSource={this.state.pdfData}
                    renderItem={(item,index) => (
                        <List.Item>
                            <ListInfoPDF>{item.title}</ListInfoPDF>
                            <ListInfoPDF>{item.author}</ListInfoPDF>
                            <ListInfoPDFButton>
                                <Button type="primary"  onClick={() => this.showModalPDF((this.state.pageDataPDF-1)*(this.state.pageSizeData)+index)}>
                                    查看
                                </Button>
                            </ListInfoPDFButton>


                        </List.Item>
                    )}
                />
                <label><b>当前查询总数:{this.state.pdfData.length}</b></label>
                查看结果列表
                <Modal
                    title="pdf"
                    visible={this.state.visible}
                    onOk={this.handleOkPDF}
                    onCancel={this.handleCancelPDF}
                    width='100%'
                    height='100%'
                    cancelText='返回'
                    okText='获取'
                >
                    <PdfPreview
                        path={this.state.PDF_path}
                    />
                    {/*<ReactToPrint*/}
                    {/*    trigger={() => <a href="#"><Button type='primary' style={{marginTop: 10}}>打印</Button></a>}*/}
                    {/*    content={() => this.refs}*/}
                    {/*/>*/}

                </Modal>
            </div>

        );
    }
}

export default ResearchGroup7;